import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Input, Image, Button, message } from 'antd'
import styles from './index.module.less'
import signupImage from '@/assets/image/signup.png'
import loginImage from '@/assets/image/login.png'
import { registerAccountApi, loginAccountApi } from '@/request/api/master'
import LoadingClass from '@/utils/utilClass/Loading'
import { userInfoStore } from '@/store/store'

export default function Index() {
  const [type, setType] = useState<'login' | 'signup'>('login')

  return (
    <div className={styles.box}>
      {type === 'login' ? (
        <Login toggle={setType} />
      ) : (
        <Signup toggle={setType} />
      )}
    </div>
  )
}

//
// 登录组件
function Login({ toggle }: { toggle: Function }) {
  const [account, setAccount] = useState<string>('')
  const [password, setPassword] = useState<string>('')
  const navigate = useNavigate()

  const classLoading = new LoadingClass()

  const loginAccount = async () => {
    if (account.length === 0 || password.length === 0)
      return message.warning('账号或密码不能为空！')

    const res = await classLoading._operationFunc(() =>
      loginAccountApi(account, password)
    )
    if (res.code !== 200) return message.error('登录失败！')

    window.localStorage.setItem('token', res.token)
    message.success('登录成功！')
    userInfoStore.getUserInfo()
    setAccount('')
    setPassword('')
    setTimeout(() => navigate('/home'), 300)
  }

  return (
    <div className={styles.loginBox}>
      <Image width={160} src={loginImage} preview={false} />

      <div className={styles.input}>
        <div className={styles.label}>账号:</div>
        <Input
          value={account}
          placeholder="account"
          onChange={(event) => setAccount(event.target.value.trim())}
        />
      </div>

      <div className={styles.input}>
        <div className={styles.label}>密码:</div>
        <Input.Password
          visibilityToggle={false}
          value={password}
          placeholder="password"
          onChange={(event) => setPassword(event.target.value.trim())}
        />
      </div>

      <Button
        type="primary"
        loading={classLoading._loading}
        onClick={loginAccount}
      >
        Login
      </Button>

      <div className={styles.bottomTip}>
        <div onClick={() => toggle('signup')}>没有账号？注册</div>
      </div>
    </div>
  )
}

//
// 注册组件
function Signup({ toggle }: { toggle: Function }) {
  const [account, setAccount] = useState<string>('')
  const [password, setPassword] = useState<string>('')

  const classLoading = new LoadingClass()

  // 注册
  const registerAccount = async () => {
    if (account.length === 0 || password.length === 0)
      return message.warning('账号或密码不能为空！')

    const res = await classLoading._operationFunc(() =>
      registerAccountApi(account, password)
    )
    if (res.code !== 200) return message.error('注册失败！')

    message.success('注册成功！')
    setAccount('')
    setPassword('')
  }

  return (
    <div className={styles.loginBox}>
      <Image width={160} src={signupImage} preview={false} />

      <div className={styles.input}>
        <div className={styles.label}>账号:</div>
        <Input
          value={account}
          placeholder="account"
          onChange={(event) => setAccount(event.target.value.trim())}
        />
      </div>

      <div className={styles.input}>
        <div className={styles.label}>密码:</div>
        <Input.Password
          visibilityToggle={false}
          value={password}
          placeholder="password"
          onChange={(event) => setPassword(event.target.value.trim())}
        />
      </div>

      <Button
        type="primary"
        loading={classLoading._loading}
        onClick={registerAccount}
      >
        Sign Up
      </Button>

      <div className={styles.bottomTip}>
        <div onClick={() => toggle('login')}>已有账号？登录</div>
      </div>
    </div>
  )
}
